 
	<style type="text/css">
		.container-box{
			height: 100vh;
		}
		.semanticui-headerbox{
			position: relative;
			height: 10%;
			background-color: #666;
		}
		.leftbox,.rightbox{
			float: left;
			width: 50%;
			height: 90%;
		}
		.leftbox{
			background-color: #888;
		}
		.rightbox{
			background-color: #999;
		}
	</style>



<!-- semanticui / 导航栏布局 start-->
	<div class="container-box">
		<div class="semanticui-headerbox">
			<!--嵌入semanticui框架的导航栏组件-->
			<!-- 框架的组件文档 "https://zijieke.com/semantic-ui/collections/menu.php" -->
			<div class="ui secondary menu" style="min-height: 100%">
			  <a class="item active">
			    主页
			  </a>
			  <a class="item">
			    信息
			  </a>
			  <a class="item">
			    朋友
			  </a>
			  <div class="right menu">
			    <div class="item">
			      <div class="ui icon input">
			        <input type="text" placeholder="搜索...">
			        <i class="search link icon"></i>
			      </div>
			    </div>
			    <a class="ui item">
			      退出
			    </a>
			  </div>
			</div>
			<!--semanticui框架的导航栏组件结束-->
		</div>


		<!-- 左侧区域描述 -->
		<div class="leftbox">
			

		</div>


		<!-- 右侧区域描述 -->
		<div class="rightbox">
			
			
		</div>
	</div>
	
	<script type="text/javascript">
		//获取navitem项
		var navitem=$('.menu .item');
		//为item执行点击事件
		navitem.click(function(){
			console.log($(this).index());
			//利用addClass()、removeClass()来控制当前点击项的样式。
			//siblings()可获取当前点击项的其他兄弟元素
			//$(this).addClass('active')
			//$(this).siblings().removeClass('active');
		});
	</script>
<!-- semanticui / 导航栏布局 end-->